<template>
	<gracePage headerBG="#FFFFFF">
		<view slot="gHeader" class="grace-bg-white">
			<view class="grace-header-body grace-relative">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34" style="" @tap="appFn.navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center"><text class="grace-h4 text-center font-size-36" style="font-size:36rpx;">个人中心</text></view>
				<!-- 消息按钮 -->
				<text class="grace-text grace-blue"></text>
			</view>
		</view>
		<view slot="gBody" class="grace-body">
			<view class="grace-list-items">
				<view class="grace-list-body grace-border-b grace-space-between">
					<view class="grace-list-title"><text class="grace-list-title-text">头像</text></view>
					<image :src="loginStatus ? userInfo.user_picture : '/static/images/noLogin.png'" style="width: 50rpx;height: 50rpx;"></image>
				</view>
				<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
			</view>
			<view class="grace-list-items">
				<view class="grace-list-body grace-border-b grace-space-between">
					<view class="grace-list-title"><text class="grace-list-title-text">账号</text></view>
					<text class="grace-desc grace-black6">{{userInfo.mobile_phone}}</text>
				</view>
			</view>
			<view class="grace-list-items">
				<view class="grace-list-body grace-border-b grace-space-between">
					<view class="grace-list-title"><text class="grace-list-title-text">用户名</text></view>
					<text class="grace-desc grace-black6">{{userInfo.user_name}}</text>
				</view>
				<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
			</view>
			<view class="grace-list-items"  @click="editPassword">
				<view class="grace-list-body">
					<view class="grace-list-title"><text class="grace-list-title-text" >修改密码</text></view>
				</view>
				<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
			</view>
			<view style="height: 400rpx;"></view>
			<view class="mx-5">
				 <button type="primary" plain="true" class="grace-tbr-large " v-if="loginStatus" style="color: #1CA376;border: 1rpx solid #1CA376;"  @click="logoutEvent">退出登录</button>
				 <button type="primary" plain="true" class="grace-tbr-large " v-else style="color: #1CA376;border: 1rpx solid #1CA376;" @click="gotoLogo">去登录</button>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
import graceBorderRadius from "@/graceUI/components/graceBorderRadius.vue";
import { mapState,mapMutations } from 'vuex';
export default {
	data() {
		return {
		};
	},
	created() {
		this.init();
	},
	computed: {
		...mapState({
			loginStatus: state => state.user.loginStatus,
			userInfo: state => state.user.userInfo
		})
	},
	methods: {
		...mapMutations(['logout']),
		init() {
			console.log(this.userInfo)
		},
		gotoLogo(){
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},
		logoutEvent(){
			this.$HTTP.postStatus('/api/api.php', {act:'logout',},{token:true}).then(res=>{
				// 退出登录
				this.logout();
				uni.showToast({
					title: '退出成功',
					icon: 'none'
				});
				uni.navigateBack({
					delta: 1
				});
			})
		},
		editPassword(){
			uni.navigateTo({
				url: '/pages/homeBox/editPassword/editPassword'
			});
		}
	},
	components: {
		gracePage,graceBorderRadius
	}
};
</script>
<style></style>
